<template>
  <view class="contnet"
        style=" background: #f4f4f4;">
    <view class="header_txt">
      <view class="back"
            @click="goback">
        <image src="/static/img/back3.png"></image>
      </view>
      <view class="title"> 名企详情 </view>
    </view>
    <view class="top_img_box"
          :style="{ 'background-image': 'url(' +$serverIp+ obj.background + ')','background-repeat':'no-repeat','background-size':'cover' }">
      <image class="top_avatar"
             :src="$serverIp+obj.image"></image>
    </view>
    <view class="list_btm_box">
      <view class="list_btm_item">
        <image v-show="obj.is_collect==1"
               @click="coll(obj.is_collect)"
               src="../../static/image/kqfx_ico_sc_sel@2x.png"
               mode=""></image>
        <image v-show="obj.is_collect==0"
               @click="coll(obj.is_collect)"
               src="../../static/image/jyjq_ico_sc@2x.png"
               mode=""></image>
        {{obj.collect_num}}
      </view>
      <view class="list_btm_item">
        <image v-show="obj.is_like==1"
               @click="zan(obj.is_like)"
               src="../../static/image/kqfx_ico_dz_sel@2x.png"
               mode=""></image>
        <image v-show="obj.is_like==0"
               @click="zan(obj.is_like)"
               src="../../static/image/sy_ico_dz@2x.png"
               mode=""></image>
        {{obj.like_num}}
      </view>
      <view class="list_btm_item">
        <image src="../../static/image/zpzx_ico_yd@2x.png"
               mode=""></image>
        {{obj.watch_num}}
      </view>
      <!-- <view class="list_btm_item">
				<image src="../../static/image/kqfx_ico_llrc@2x.png" mode=""></image>5000
			</view> -->
    </view>
    <view class="item_box">
      <view class="item_box_title">
        <view class="item_box_line"></view>考情分析
      </view>
      <view class="item_box_con">
        <rich-text :nodes="obj.analysis"></rich-text>
      </view>
    </view>
    <view class="item_box">
      <view class="item_box_title">
        <view class="item_box_line"></view>公司概况
      </view>
      <view class="item_box_con">
        <rich-text :nodes="obj.dynamic"></rich-text>
      </view>
    </view>
    <view class="item_box">
      <view class="item_box_title">
        <view class="item_box_line"></view>最新动态
      </view>
      <view class="item_box_con">
        <rich-text :nodes="obj.dynamic"></rich-text>
      </view>
    </view>
    <view class="item_box">
      <view class="item_box_title1">
        <view class="item_box_title_l">
          <view class="item_box_line"></view>学员评价({{eveaList.length}})
        </view>
        <view class="item_box_title_r">
          <view class="item_box_fens">{{obj.score}}</view>
          <view class="item_box_tip">综合得分</view>
        </view>
      </view>
      <view class="news_bottom"
            v-show="eveaList.length>0">
        <view class="news_user1">
          <image src=""
                 mode=""></image>
          <view class="ev_user_box">
            <view class="news_user_name">{{987}}</view>
            <view class="ev_time">{{425}}</view>
          </view>
        </view>
        <view class="ev_start_box">
          <image src="../../static/image/mqfx_ico_pj__nor@2x.png"
                 mode=""></image>
          <image src="../../static/image/ico_img_str_nor@2x.png"
                 mode=""></image>
        </view>
        <view class="news_content1">{{42}}</view>
      </view>
    </view>
    <view class="item_box1">
      <view class="item_box_title">
        <view class="item_box_line"></view>套餐选择
      </view>
      <view class="item_box_con">
        <view class="con_tabber_box">
          <view @click="type=1"
                class="tabber_item itemactive">笔试/面试套餐</view>
          <view @click="type=2"
                class="tabber_item itemactive">助攻套餐</view>
        </view>
        <!-- 笔试面试 -->
        <template v-if="type==1">
          <view v-for="el in goodsList"  @click="toke(el.id)"
                :key="el.id"
                class="item_con_item">
            <view class="item_con_item_l">
              <image :src="$serverIp+el.image"
                     mode=""></image>
            </view>
            <view class="item_con_item_r">
              <view class="item_con_title">{{el.name}}</view>
              <view class="item_con_info">
                <view class="item_con_info_l">
                  <image src="../../static/image/ss_ico_xx@2x.png"
                         mode=""></image>{{el.buy_num}}人已学习
                </view>
                <view class="item_con_info_r">
                  <text style="font-size: 24rpx;">￥</text>{{el.now_price}}
                </view>
              </view>
            </view>
          </view>
        </template>

        <!-- 助攻 -->
        <template v-if="type==2">
          <view v-for="el in goodsList" @click="toke(el.id)"
                :key="el.id"
                class="item_con_item">
            <view class="item_con_item_l">
              <image :src="$serverIp+el.image"
                     mode=""></image>
            </view>
            <view class="item_con_item_r">
              <view class="item_con_title">{{el.name}}</view>
              <view class="item_con_info">
                <view class="item_con_info_l">
                  <image src="../../static/image/ss_ico_xx@2x.png"
                         mode=""></image>{{el.num}}人已学习
                </view>
                <view class="item_con_info_r">
                  <text style="font-size: 24rpx;">￥</text>{{el.price}}
                </view>
              </view>
            </view>
          </view>
        </template>

      </view>
    </view>
    <view class="btm_line"></view>
    <view class="btm_box">
      <view class="btm_item"
            @click="open"
            data-target="Modal1">
        <image src="../../static/image/mqpj_ico_pj_h@2x.png"
               mode=""></image>
        <view class="btm_tip">评价</view>
      </view>
      <navigator :url="'/pages/kaoq/tiwen?id='+c_id"
                 class="btm_item">
        <image src="../../static/image/mqpj_ico_tw@2x.png"
               mode=""></image>
        <view class="btm_tip">提问</view>
      </navigator>
      <navigator :url="'/pages/kaoq/liuyan?id='+c_id"
                 class="btm_item">
        <image src="../../static/image/mqpj_ico_tw@2x(1).png"
               mode=""></image>
        <view class="btm_tip">留言</view>
      </navigator>
    </view>

    <u-popup :show="show"
             :closeable="true"
             :duration="500"
             mode="center"
             @close="close"
             @open="open">
      <view>

        <view class="cu-modal show">
          <view class="cu-dialog">
            <view class="cu_title">
              <view></view>
              <view class="text-bold cu-item-title1">名企评价</view>
              <view class="action1">
              </view>
            </view>
            <view class="padding_xl">
              <view class="cu_start_box">
                <u-rate active-color="#ffdd47"
                        @change="onchange"
                        size="50rpx"
                        inactive-color="#b2b2b2"
                        gutter="10"></u-rate>
                <!-- <uni-rate :size="18" :value="0" @change="onChange"/> -->
              </view>
              <view class="cu_text_area">
                <textarea value="text"
                          v-model="content"
                          placeholder="请输入对该企业的评价"
                          class="text_area_class"
                          placeholder-class="input_class" />
              </view>
            </view>
            <view @click="save"
                  class="button">
              <view class="cu_btn">确认提交</view>
            </view>
          </view>

        </view>
      </view>
    </u-popup>

    <!-- 名企评价弹窗 -->

    <!-- 不能评价弹窗 -->
    <view v-show="false"
          class="cu-modal show">
      <view class="cu-dialog">
        <view class="cu_title">
          <view></view>
          <view class="text-bold cu-item-title1">提示</view>
          <view class="action1">
            <!-- <image src="../../static/image/ico_ts_gb@2x.png" mode=""></image> -->
          </view>
        </view>
        <view class="padding_xl1">
          <view class="cu_tip">您还未报名该企业下的课程，无法评价</view>
        </view>
        <view class="button">
          <view class="cu_btn">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      c_id: '',
      obj: '',
      eveaList: [],
      type: 1,
      goodsList: [],
      show: false,
      content: '',
      nums: 1
    }
  },
  onShow(e) {
    this.getDetail()
    this.getList()
  },
  onLoad(e) {
    this.c_id = e.id
  },
  methods: {
    onchange(e) {
      this.nums = e
    },
    //收藏
    async coll(val) {
      if (val == 1) {
        let { data } = await this.$http.post('/company/cancel_collect', { c_id: this.c_id })

        uni.showToast({
          title: data.msg,
          icon: 'none'
        })
      } else {
        let { data } = await this.$http.post('/company/collect', { c_id: this.c_id })

        uni.showToast({
          title: data.msg,
          icon: 'none'
        })
      }
      this.getDetail()
    },

    async getDetail() {
      let { data } = await this.$http.post('/company/detail', { c_id: this.c_id })
      this.obj = data.data
      if (this.type == 1) this.goodsList = this.obj.curriculum_list
      if (this.type == 2) this.goodsList = this.obj.assists_list
    },
    async zan(val) {
      if (val == 1) {
        let { data } = await this.$http.post('/company/cancel_like', { c_id: this.c_id })

        uni.showToast({
          title: data.msg,
          icon: 'none'
        })
      } else {
        let { data } = await this.$http.post('/company/like', { c_id: this.c_id })

        uni.showToast({
          title: data.msg,
          icon: 'none'
        })
      }
      this.getDetail()
    },
    async getList() {
      let { data } = await this.$http.post('/company/evaluate_list', { c_id: this.c_id, page: 1, limit: 5 })

      this.eveaList = data.data
    },
    close() {
      this.show = false
    },
    open() {
      this.show = true
    },
    async save() {
      let { data } = await this.$http.post('/company/evaluate', { c_id: this._id, score: this.nums, evaluate: this.content })

      this.show = false

      uni.showToast({
        title: data.msg,
        icon: 'none'
      })
    }
  },
  watch: {
    type: {
      handler(val) {
        if (val == 1) this.goodsList = this.obj.curriculum_list
        if (val == 2) this.goodsList = this.obj.assists_list
      }
    }
  }
}
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100%;
}
.header_txt {
  width: 750rpx;
  overflow: hidden;
  height: 88rpx;
  background-color: #fff;

  .back {
    position: absolute;
    top: 14rpx;
    left: 14rpx;
    width: 60rpx;
    height: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    image {
      width: 48rpx;
      height: 48rpx;
    }
  }

  /* // .right {
  //   position: absolute;
  //   top: 14rpx;
  //   right: 14rpx;
  //   width: 60rpx;
  //   height: 60rpx;
  //   display: flex;
  //   justify-content: center;
  //   align-items: center;
  // } */

  .title {
    width: 750rpx;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
  }
}
.top_img_box {
  width: 100%;
  height: 300rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  // background-image: url(../../static/image/mqfx_img_bg@2x.png);
  /* background-image: url(../../static/image/mqfx_img_yh@2x.png); */
  background-size: 100% 100%;
  /* -webkit-filter: blur(8px); */
  /* background: #000000; */
  /* opacity: 0.8; */
}

.top_avatar {
  width: 150rpx;
  height: 150rpx;
  background-color: #f5f5f5;
  border-radius: 50%;
}

.list_btm_box {
  width: 100%;
  height: 80rpx;
  padding: 0 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
}

.list_btm_item {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  align-items: center;
}

.list_btm_item image {
  width: 28rpx;
  height: 26rpx;
  margin-right: 10rpx;
}

.item_box {
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  margin-top: 20rpx;
  padding-bottom: 30rpx;
}
.item_box1 {
  padding: 0 30rpx;
  padding-top: 30rpx;
  background-color: #ffffff;
  margin-top: 20rpx;
}

.item_box_title {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
}

.item_box_title1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25rpx;
}

.item_box_title_l {
  display: flex;
  align-items: center;
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}

.item_box_line {
  width: 4rpx;
  height: 20rpx;
  background: #ffdd47;
  border-radius: 2rpx;
  margin-right: 10rpx;
}

.item_box_fens {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ff3b30;
}
.item_box_tip {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.item_box_title_r {
  text-align: center;
}

.news_bottom {
  width: 100%;
  height: auto;
  /* padding-top: 15rpx; */
}

.news_user1 {
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.news_user1 image {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}

.news_user_name {
  margin-left: 20rpx;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}

.ev_time {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-left: 20rpx;
}

.ev_start_box {
  width: 100%;
  height: 50rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.ev_start_box image {
  width: 28rpx;
  height: 26rpx;
  margin-right: 12rpx;
}
.btm_line {
  height: 140rpx;
  width: 100%;
}
.con_tabber_box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 15rpx;
}
.tabber_item {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  margin-right: 60rpx;
}
.itemactive {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  margin-right: 60rpx;
}
.item_con_item {
  width: 100%;
  height: 170rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.item_con_item_l image {
  width: 196rpx;
  height: 130rpx;
  border-radius: 10rpx;
}
.item_con_item_r {
  margin-left: 20rpx;
  height: 170rpx;
  padding-top: 15rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.item_con_info_l image {
  width: 28rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
.item_con_info_l {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
.item_con_title {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
}
.item_con_info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10rpx;
}
.item_con_info_r {
  font-size: 34rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #ff3b30;
}
.btm_box {
  width: 100%;
  height: 98rpx;
  padding: 0 100rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  border-top: 1rpx solid #e5e5e5;
}
.btm_item image {
  width: 48rpx;
  height: 44rpx;
}
.btm_tip {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}
/* 企业评价弹窗 */
.cu-dialog {
  width: 570rpx;
  height: auto;
  background: #ffffff;
  border-radius: 10rpx;
}
.cu-item-title {
  font-size: 32rpx;
}

.cu-item-title1 {
  width: 100%;
  font-size: 32rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cu_title {
  width: 100%;
  height: 80rpx;
  padding: 0rpx 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f5;
}
.button {
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cu_btn {
  width: 300rpx;
  height: 60rpx;
  background: #ffdd47;
  border-radius: 6rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.padding_xl {
  width: 100%;
  height: 245rpx;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.padding_xl1 {
  width: 100%;
  padding: 45rpx 0;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.cu_start_box {
  width: 100%;
  height: 90rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cu_start_box image {
  width: 39rpx;
  height: 36rpx;
  margin-right: 10rpx;
}
.cu_text_area {
  width: 509rpx;
  height: 140rpx;
  background: #f2f2f2;
  padding: 20rpx 20rpx;
}
.text_area_class {
  width: 100%;
  height: 100%;
  text-align: left;
  font-size: 26rpx;
}
.input_class {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
}
.cu_close {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  bottom: 25%;
  right: 45%;
}
.action1 image {
  width: 29rpx;
  height: 29rpx;
}
.cu_tip {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
</style>
